<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta content="" name="Keywords">
<meta content="" name="Description">
<title>智慧管理平台</title>
<meta name="format-detection" content="telephone=no">
<meta name="author" content="design by www.jerei.com">
<link href="./css/style.css" rel="stylesheet" />
<link href="./css/swiper.min.css" rel="stylesheet" />
<link href="./css/animate.min.css" rel="stylesheet" />
<script>
(function (win, doc) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
setFontSize = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, setFontSize, false);
doc.addEventListener('DOMContentLoaded', setFontSize, false);
if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
        win.addEventListener(resizeEvt, function () {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
        }, false);
        win.addEventListener("pageshow", function(e) {
            if (e.persisted) {
                clearTimeout(timer);
                timer = setTimeout(setFontSize, 300);
            }
        }, false);
        setFontSize();
    } 

})(window,document);
</script>
<script type="text/javascript" src="js/imgLoader.js"></script>
</head>
<body>
<section id="loader" class="loader">
  <div class="loader_bar">
    <div class="loader_progress-bg">
      <div class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
      </div>
    </div>
    <div id="loader_info" class="loader_info">加载中 0%</div>
  </div>
</section>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <!--p1-->
    <div class="swiper-slide p1">
      <div class="p1Box">
        <div class="logo"><img src="img/p1_logo.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s"></div>
        <div class="circle01 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"><div class="ib circle360"></div></div>
        <div class="circle02 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"><div class="ib circle360_anti"></div></div>
        <div class="light01"></div>
        <div class="light02"></div>
      </div>
      <div class="p1Btn ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="1s"><a href="#"><img src="img/btn.png" alt="点击启动"></a></div>
    </div>
    <!--p2-->
    <div class="swiper-slide p2">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">平台背景</h2>
      </div>
      <div class="com_body">
        <div class="img ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s"><img src="img/p2_img01.png" alt="人员管理粗放"></div>
        <div class="img ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1.7s"><img src="img/p2_img02.png" alt="监督管理不到位"></div>
        <div class="img ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="2.2s"><img src="img/p2_img03.png" alt="物件管理混乱"></div>
      </div>
    </div>
    <!--p3-->
    <div class="swiper-slide p3">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">战略目标</h2>
      </div>
      <div class="com_body">
        <div class="text ani"  swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">高效   便民 公开 公信力强 满意度高</div>
        <div class="box">
          <div class="img img01 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.7s"><img src="img/p3_img01.png" alt="提高"><div class="circle circle360"></div></div>
          <div class="img img02 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.2s"><img src="img/p3_img02.png" alt="规范"><div class="circle circle360"></div></div>
          <div class="img img03 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.7s"><img src="img/p3_img03.png" alt="强化"><div class="circle circle360_anti"></div></div>
        </div>
      </div>
    </div>
    <!--p4-->
    <div class="swiper-slide p4">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">平台亮点</h2>
      </div>
      <div class="com_body">
        <div class="img img01 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="2.1s"><img src="img/p4_img01.png" alt="物联互通"></div>
        <div class="img img02 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.8s"><img src="img/p4_img02.png" alt="执法办案信息化"></div>
        <div class="img img03 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s"><img src="img/p4_img03.png" alt="智能化管理"></div>
        <div class="img img04 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s"><img src="img/p4_img04.png" alt="可视化监督"></div>
      </div>
    </div>
    <!--p5-->
    <div class="swiper-slide p5">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">物联互通</h2>
      </div>
      <div class="com_body">
        <div class="img img01 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="1.2s"><img src="img/p5_img01.png" alt="电脑"></div>
        <div class="img img02 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="2.2s"><img src="img/p5_img02.png" alt="软件"></div>
        <div class="img img03 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.7s"><img src="img/p5_img03.png" alt="硬件"></div>
      </div>
    </div>
    <!--p6-->
    <div class="swiper-slide p6">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">执法办案<br>信息化</h2>
      </div>
      <div class="com_body">
        <div class="box">
          <div class="img img01 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s"><img src="img/p6_img01.png" alt="警综系统"><div class="circle circle360"></div></div>
          <div class="img img02 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.7s"><img src="img/p6_img02.png" alt="云端视频库"><div class="circle circle360_anti"></div></div>
          <div class="img img03 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2.2s"><img src="img/p6_img03.png" alt="电子笔录系统"><div class="circle circle360_anti"></div></div>
          <div class="img img04 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="2.7s"><img src="img/p6_img04.png" alt="短信接口"><div class="circle circle360"></div></div>
        </div>
      </div>
    </div>
    <!--p7-->
    <div class="swiper-slide p7">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">智能化管理</h2>
      </div>
      <div class="com_body">
        <div class="title ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.7s">移动执法记录</div>
        <div class="text ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">普通执法仪即接即自动获取接处警信息，<br>4G移动执法仪对接智慧管理平台自动传输接处警信息。</div>
        <div class="light ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.2s"></div>
        <div class="box">
          <div class="img img01 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="2.7s"><img src="img/p7_img01.png" alt="执法办案中心智慧管理平台"></div>
          <div class="img img02"><img src="img/p7_img02.png" alt="普通执法仪"><div class="circle circle360"></div></div>
          <div class="img img03"><img src="img/p7_img03.png" alt="4G执法仪"><div class="circle circle360_anti"></div></div>
        </div>
        
      </div>
    </div>
    <!--p8-->
    <div class="swiper-slide p8">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">智能化管理</h2>
      </div>
      <div class="com_body">
        <div class="title ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">全国在逃人员核查</div>
        <div class="img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.7s"><img src="img/p8_img01.png" alt="face"><div class="light light_scan"></div></div>
        <div class="text ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="2.2s">对嫌疑人面部进行拍照识别，并与警综系统对接进行<br>全国在逃人员查询比对，确定嫌疑人是否是在逃人员</div>
      </div>
    </div>
    <!--p9-->
    <div class="swiper-slide p9">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">智能化管理</h2>
      </div>
      <div class="com_body">
        <div class="title ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.7s">人员行动轨迹</div>
        <div class="text ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">嫌疑人人员行动轨迹，<br>自动记录嫌疑人由进到出的每一条轨迹；</div>
        <div class="box">
          <div class="stars twinkle"></div>
          <div class="light ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.2s"><div class="box circle360"></div></div>
          <div class="img img01 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.7s"><img src="img/p9_img01.png" alt="电脑"></div>
          <div class="img img02"><img src="img/p9_img02.png" alt="路线"></div>
          <div class="img img03 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="6.5s"><img src="img/p9_img03.png" alt="内容"><div class="circle circle360_anti"></div></div>
        </div>
      </div>
    </div>
    <!--p10-->
    <div class="swiper-slide p10">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">智能化管理</h2>
      </div>
      <div class="com_body">
        
      </div>
    </div>
    <!--p11-->
    <div class="swiper-slide p11">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">智能化管理</h2>
      </div>
      <div class="com_body">
        
      </div>
    </div>
    <!--p12-->
    <div class="swiper-slide p12">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">智能化管理</h2>
      </div>
      <div class="com_body">
        
      </div>
    </div>
    <!--p13-->
    <div class="swiper-slide p13">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">智能化管理</h2>
      </div>
      <div class="com_body">
        
      </div>
    </div>
    <!--p14-->
    <div class="swiper-slide p14">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">智能化管理</h2>
      </div>
      <div class="com_body">
        
      </div>
    </div>
    <!--p15-->
    <div class="swiper-slide p15">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">可视化监督</h2>
      </div>
      <div class="com_body">
        
      </div>
    </div>
    <!--p16-->
    <div class="swiper-slide p16">
      <div class="com_head">
        <span class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"></span>
        <span class="right ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s"></span>
        <h2 class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">平台价值</h2>
      </div>
      <div class="com_body">
        
      </div>
    </div>
    <!--p17-->
    <div class="swiper-slide p17">
      <div class="com_body">
        
      </div>
    </div>
  </div>
  <a href="javascript:;" class="ui-icon icon-up"></a>
</div>
<!-- 背景音乐 -->
<a href="javascript:;" class="ui-music">
  <i class="ui-icon icon-music"></i>
  <audio data-src="img/bgm.mp3" autoplay="autoplay" loop="loop"></audio>
</a>
<script src="./js/zepto.min.js"></script>
<script src="./js/swiper.jquery.min.js"></script>
<script src="./js/swiper.animate.min.js"></script>
<script>
//loading 预加载
imgLoader(
  ["img/indexbg.jpg","img/p1_circle2.png","img/p1_circle1.png","img/p1_logo.png",//page1
   "img/p2_img01.png","img/p2_img02.png","img/p2_img03.png",//page2
   "img/mainbg.jpg","img/headbg.png"], 
  function (percentage) {
  var percentT = percentage * 100;
  $('#loader_info').html('加载中 ' + (parseInt(percentT)) + '%');
  if (percentage == 1) {
    $('#loader').remove();
    $('.swiper-container').show();
    var upico=$('.icon-up');
    var mySwiper = new Swiper ('.swiper-container', {
      onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
        swiperAnimateCache(swiper); //隐藏动画元素 
        swiperAnimate(swiper); //初始化完成开始动画
      }, 
      onSlideChangeEnd: function(swiper){
        swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        if(swiper.activeIndex==17){
          upico.hide();
        }else{
          upico.show()
        }
      },
      direction: 'vertical',
        loop: false 
      })
    }
});
//初始化音乐组件
/*var g_audio = $(".ui-music audio").get(0), isPlay = false;
$('body').on('touchstart', function (e) {
  if(!isPlay){
    g_audio.src = $(g_audio).attr('data-src');
    g_audio.play();
    isPlay = true;
    $('.ui-music').addClass('playing');
    $(g_audio).attr('data-play',1);
  }
});
$('.ui-music').on("click", function (e) {
  e.preventDefault();
  if($(g_audio).attr('data-play')==1){
    g_audio.pause();
    $(g_audio).attr('data-play',0);
    $('.ui-music').removeClass('playing');
  }else{
    g_audio.play();
    $(g_audio).attr('data-play',1);
    $('.ui-music').addClass('playing');
  }
});*/
</script>
</body>
</html>
